<template>
  <chart :options="opts" :width="width" :height="height"></chart>
</template>

<script>
import _ from 'lodash'

export default {
  name: 'Ring',

  props: ['width', 'height', 'data', 'options'],

  computed: {
    opts () {
      let fontSize = window.lib.flexible.rem2px(0.35)
      let valueArray = _.map(this.data, 'value')
      let sum = valueArray.reduce((prev, cur, index, array) => {
        return prev + cur
      })
      let showData = this.data.map((item) => {
        let data = (item.value / sum * 100).toFixed(2)
        return {
          value: item.value,
          name: `${item.name}  ${data}%`
        }
      })
      let defaultOptions = {
        title: {
          text: '待处理',
          x: fontSize * 6.5,
          y: 'center',
          textStyle: {
            fontSize: fontSize
          }
        },
        legend: {
          orient: 'vertical',
          left: '55%',
          top: 'middle',
          data: _.map(showData, 'name'),
          itemGap: 10,
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            fontSize: fontSize
          }
        },
        series: [{
          name: '',
          type: 'pie',
          avoidLabelOverlap: false,
          radius: ['48%', '60%'],
          center: ['30%', '50%'],
          label: {
            normal: {
              show: false
            }
          },
          data: showData
        }],
        color: ['#929292', '#c0252e', '#383838']
      }

      return _.merge({}, defaultOptions, this.options)
    }
  }
}
</script>

<style lang="css">
</style>
